import React, { useState } from 'react';
import { Button, Card, Space, Divider, message, Tag } from 'antd';
import {
  SelectionItem,
  UserSelectModal,
  KnowledgeBaseSelectModal,
  UserPermissionSelectModal,
  UserWithPermission
} from '../index';

// 模拟用户数据
const mockUsers: SelectionItem[] = [
  { id: '1', name: '教工组', children: [{ id: '11', name: '教工1' }, { id: '12', name: '教工2' }] },
  { id: '2', name: '学生组', children: [{ id: '21', name: '学生1' }, { id: '22', name: '学生2' }] },
  { id: '3', name: '领导组', children: [{ id: '31', name: '领导1' }, { id: '32', name: '领导2' }] },
];

// 模拟知识库数据
const mockKnowledgeBases: SelectionItem[] = [
  { id: 'kb1', name: '政策文件' },
  { id: 'kb2', name: '学院文件' },
  { id: 'kb3', name: '研究数据' },
  { id: 'kb4', name: '教学资源' },
];

const SelectionModalDemo: React.FC = () => {
  // 用户选择模态框
  const [userModalVisible, setUserModalVisible] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState<SelectionItem[]>([]);
  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);

  // 知识库选择模态框
  const [kbModalVisible, setKbModalVisible] = useState(false);
  const [selectedKbs, setSelectedKbs] = useState<SelectionItem[]>([]);
  const [selectedKbIds, setSelectedKbIds] = useState<string[]>([]);

  // 带权限设置的用户选择模态框
  const [userPermModalVisible, setUserPermModalVisible] = useState(false);
  const [usersWithPermissions, setUsersWithPermissions] = useState<UserWithPermission[]>([]);

  // 处理用户选择确认
  const handleUserConfirm = (users: SelectionItem[]) => {
    setSelectedUsers(users);
    setSelectedUserIds(users.map(user => user.id));
    setUserModalVisible(false);
    message.success(`已选择 ${users.length} 个用户`);
  };

  // 处理知识库选择确认
  const handleKbConfirm = (kbs: SelectionItem[]) => {
    setSelectedKbs(kbs);
    setSelectedKbIds(kbs.map(kb => kb.id));
    setKbModalVisible(false);
    message.success(`已选择 ${kbs.length} 个知识库`);
  };

  // 处理带权限的用户选择确认
  const handleUserPermConfirm = (users: UserWithPermission[]) => {
    setUsersWithPermissions(users);
    setUserPermModalVisible(false);
    message.success(`已设置 ${users.length} 个用户的权限`);
  };

  // 根据ID查找知识库名称
  const getKnowledgeBaseName = (id: string) => {
    const kb = mockKnowledgeBases.find(kb => kb.id === id);
    return kb ? kb.name : id;
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl mb-4">选择模态框组件演示</h1>

      <Space direction="vertical" className="w-full">
        <Card title="用户选择组件" className="mb-4">
          <div className="mb-4">
            <p>当前已选 {selectedUsers.length} 个用户：</p>
            <ul>
              {selectedUsers.map(user => (
                <li key={user.id}>{user.name}</li>
              ))}
            </ul>
          </div>
          <Button type="primary" onClick={() => setUserModalVisible(true)}>
            选择用户
          </Button>
        </Card>

        <Card title="知识库选择组件" className="mb-4">
          <div className="mb-4">
            <p>当前已选 {selectedKbs.length} 个知识库：</p>
            <ul>
              {selectedKbs.map(kb => (
                <li key={kb.id}>{kb.name}</li>
              ))}
            </ul>
          </div>
          <Button type="primary" onClick={() => setKbModalVisible(true)}>
            选择知识库
          </Button>
        </Card>

        <Card title="用户权限设置组件">
          <div className="mb-4">
            <p>当前已设置 {usersWithPermissions.length} 个用户的权限：</p>
            <ul>
              {usersWithPermissions.map(user => (
                <li key={user.id}>
                  <strong>{user.name}</strong>:
                  {user.permission === 'full' ?
                    ' 所有知识库可问答' :
                    <>
                      {' 部分知识库可问答: '}
                      {user.allowedKnowledgeBases && user.allowedKnowledgeBases.length > 0 ?
                        user.allowedKnowledgeBases.map(kbId => (
                          <Tag key={kbId} color="blue">{getKnowledgeBaseName(kbId)}</Tag>
                        )) :
                        '无'
                      }
                    </>
                  }
                </li>
              ))}
            </ul>
          </div>
          <Button type="primary" onClick={() => setUserPermModalVisible(true)}>
            设置用户权限
          </Button>
        </Card>
      </Space>

      {/* 用户选择模态框 */}
      <UserSelectModal
        title="选择可见用户"
        visible={userModalVisible}
        users={mockUsers}
        selectedIds={selectedUserIds}
        confirmText="确定"
        cancelText="取消"
        onCancel={() => setUserModalVisible(false)}
        onConfirm={handleUserConfirm}
      />

      {/* 知识库选择模态框 */}
      <KnowledgeBaseSelectModal
        title="选择可回答的知识库"
        visible={kbModalVisible}
        knowledgeBases={mockKnowledgeBases}
        selectedIds={selectedKbIds}
        confirmText="确定"
        cancelText="取消"
        onCancel={() => setKbModalVisible(false)}
        onConfirm={handleKbConfirm}
      />

      {/* 用户权限设置模态框 */}
      <UserPermissionSelectModal
        visible={userPermModalVisible}
        users={mockUsers}
        knowledgeBases={mockKnowledgeBases}
        onCancel={() => setUserPermModalVisible(false)}
        onConfirm={handleUserPermConfirm}
      />
    </div>
  );
};

export default SelectionModalDemo; 